<template>
  <div class="content-page">
    <div class="header">
      <div :class="['first_box', globalFont]">
        <div class="left" v-if="propData.categoryName !== 'NSW-002'">
          <div class="title">降温功能</div>
          <up-switch v-model="formData.temperatureStatus" activeColor="#006D56" @change="changeFn"></up-switch>
        </div>
      </div>
      <div :class="['first_box', globalFont]">
        <div class="left">
          <div class="title">清洗管路</div>
          <div class="content">
            {{ formData.cleanTime ? formData.cleanTime : 10 }} 秒
          </div>
          <div class="edit_btn" @click="showModalFn('cleanTime')">编辑</div>
        </div>
      </div>
      <div :class="['first_box', globalFont]">
        <div class="left">
          <div class="title">泵头压力</div>
          <div class="content">
            {{ formData.pressure ? formData.pressure : 40 }} 公斤水压
          </div>
          <div class="edit_btn" @click="showModalFn('pressure')">编辑</div>
        </div>
      </div>
    </div>
    <!-- <div class="content_box" v-if="formData.gen2Board">
      <div class="empty" v-if="!sceneData.length">
        <image src="/static/home/img_None@2x.png"></image>
        <div class="add_btn" @click="toaddEditPage(0, null)">
          <image src="/static/home/icon_tianjia@2x.png"></image>
          <p>新增场景</p>
        </div>
      </div>
      <div v-else>
        <div class="scene_circle" v-for="(i, k) in sceneData" :key="k">
          <div :class="['scene_name', globalFont]">{{ i.sceneType == 'TEMP' ? '温度场景' : i.sceneType == 'HUM' ? '湿度场景' :
            '大风场景' }}
          </div>
          <div :class="['scene_title', globalFont]" v-if="i.sceneType == 'TEMP'">温度{{ i.sceneCondition == '>' ? '高于' :
            '低于'
            }}{{ i.sceneValue }}摄氏度</div>
          <div :class="['scene_title', globalFont]" v-if="i.sceneType == 'WIND'">风力{{ i.sceneCondition == '>' ? '高于' :
            '低于'
            }}{{ i.sceneValue }}级</div>
          <div :class="['scene_title', globalFont]" v-if="i.sceneType == 'HUM'">湿度{{ i.sceneCondition == '>' ? '高于' :
            '低于'
            }}{{ i.sceneValue }}%RH</div>

          <div :class="['content_item', globalFont]">
            <image src="/static/home/device_icon_plan state@2x.png"
              :style="{ marginBottom: globalFont == 'small_font' ? '0' : '30rpx' }"></image>
            <span v-if="i.disablePlan === 'REPELLING'">计划状态: 驱蚊计划终止，雾森计划和降温计划正常执行</span>
            <span v-else-if="i.disablePlan === 'REPELLING;FOGGING'">计划状态: 驱蚊计划和雾森计划终止，降温计划正常执行</span>
            <span v-else-if="i.disablePlan === 'REPELLING;FOGGING;COOLING'">计划状态: 驱蚊计划、雾森计划和降温计划终止</span>
            <span v-else-if="i.disablePlan === 'FOGGING'">计划状态: 雾森计划终止，驱蚊计划和降温计划正常执行</span>
            <span v-else-if="i.disablePlan === 'COOLING'">计划状态: 降温计划终止，驱蚊计划和雾森计划正常执行</span>
          </div>
          <div :class="['content_item', globalFont]">
            <image src="/static/home/device_icon_lscene@2x.png"></image>
            <div v-if="i.sceneStatus">场景状态:启用</div>
            <div v-else>场景状态:<span style="color: red;">禁用</span></div>
          </div>
          <div class="action_box flex_between">
            <div class="action_empty"></div>
            <div class="action_btn flex_center" @click="toaddEditPage(i.sceneId, i)">
              <image src="/static/home/icon_edit@2x.png"></image>
              <div :class="['title', globalFont]">编辑</div>
            </div>
            <div class="action_btn flex_center" @click="delPlan(i.sceneId)">
              <image src="/static/home/icon_delete@2x.png"></image>
              <div :class="['title', globalFont]">删除</div>
            </div>
          </div>
        </div>
          <div class="add_btn" @click="toaddEditPage(0, null)">
          <image src="/static/home/icon_tianjia@2x.png"></image>
          <p>新增场景</p>
        </div>
      </div>
    </div> -->
    <div class="delModal">
      <up-modal :show="delModal.visiable" :showCancelButton="true" title="提示" content="您确定要删除该场景吗" @confirm="confirmModal"
        @cancel="delModal.visiable = false"></up-modal>
    </div>
  </div>
  <up-popup :show="showModal" z-index="999999999" mode="bottom" :round="16">
    <view class="title addtitle">
      <div style="width: 40rpx"></div>
      <text>编辑设备</text>
      <image src="/static/home/close.png" @click="showModal = false"></image>
    </view>
    <view class="part borderLine mt114">
      <up-picker :show="showModal" :columns="columns" v-if="type == 'cleanTime'" @change="changePicker"
        :defaultIndex="ModalcleanTime"></up-picker>
      <up-picker :show="showModal" :columns="columnsTwo" v-else :defaultIndex="Modalpressure"
        @change="changePickerTwo"></up-picker>
      <view class="modalBtn">
        <view class="btn" @click="sureSubmit">确认</view>
      </view>
    </view>
  </up-popup>
</template>
<script lang="ts" setup>
import { ref, watch, onMounted, defineProps, getCurrentInstance } from "vue";
import { devlceEditFn, advancedDeviceList, sceneDeviceDel } from "@/api/detail/detail.ts";
import { preProcessFile, unescapeLeadingUnderscores } from "typescript";
import { deviceDetail } from "../api/detail/detail.ts";
const propData = defineProps([
  "equipmentId",
  "workType",
  "categoryName"
]);
const formData = ref({
  temperatureStatus: false,
  cleanTime: "",
  pressure: "",
  gen2Board:false,
});
const ModalcleanTime = ref()
const Modalpressure = ref()
const columns = ref([
  ['10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
]);
const columnsTwo = ref([
  ['20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60', '61', '62', '63', '64', '65', '66', '67', '68', '69', '70'],
]);
// 编辑弹框
const aa = ref('')
const bb = ref('')
const changePicker = (e: any) => {
  aa.value = e.value[0]
}
const changePickerTwo = (e: any) => {
  bb.value = e.value[0]
}
const showModal = ref<boolean>(false);
const type = ref<string>("");
const showModalFn = (k: string) => {
  console.log(columns.value[0]);
  type.value = k
  showModal.value = true;
  if (k == 'cleanTime') {
    const index = columns.value[0].indexOf(formData.value.cleanTime.toString());
    if (index !== -1) {
      ModalcleanTime.value = [index];
    }
  } else {
    const index = columnsTwo.value[0].indexOf(formData.value.pressure.toString());
    if (index !== -1) {
      Modalpressure.value = [index];
    }
  }
};
const sureSubmit = () => {
  uni.showLoading({ title: "加载中" });
  const payload = {
    equipmentId: Number(propData.equipmentId),
    temperatureStatus: formData.value.temperatureStatus,
    cleanTime: aa.value || formData.value.cleanTime,
    pressure: bb.value || formData.value.pressure
  };
  devlceEditFn(payload)
    .then((res: any) => {
      if (res.resultStatus) {
        formData.value.cleanTime = payload.cleanTime;
        formData.value.pressure = payload.pressure;
        uni.showToast({ title: "操作成功", icon: "none" });
      } else {
        uni.showToast({ title: res.errorMessage, icon: "none", duration: 4000 });
      }
    })
    .catch((err: any) => {
      uni.showToast({ title: "服务器异常", icon: "none" });
    })
    .finally(() => {
      setTimeout(() => uni.hideLoading(), 2000);
      showModal.value = false;
    });
}
const changeFn = () => {
  uni.showToast({
    title: "操作中...",
    icon: "none",
  });
  devlceEditFn({
    equipmentId: Number(propData.equipmentId),
    temperatureStatus: formData.value.temperatureStatus,
    cleanTime: formData.value.cleanTime,
    pressure: formData.value.pressure
  })
    .then((res: any) => {
      if (res.resultStatus) {
        uni.showToast({
          title: "操作成功",
          icon: "none",
        });
      } else {
        uni.showToast({
          title: res.errorMessage,
          icon: "none",
          duration: 4000,
        });
        formData.value.temperatureStatus = !formData.value.temperatureStatus;
      }
    })
    .catch((err: any) => {
      uni.showToast({
        title: "服务器异常",
        icon: "none",
      });
    }).finally(() => {
      setTimeout(() => {
        uni.hideLoading();
      }, 300);
    });
}
const getDetail = () => {
  uni.showLoading({
    title: "接收中...",
    mask: true
  })
  deviceDetail(propData.equipmentId)
    .then((res: any) => {
      if (res.resultStatus) {
        formData.value.temperatureStatus = res.resultData.temperatureStatus;
        formData.value.cleanTime = res.resultData.cleanTime;
        formData.value.pressure = res.resultData.waterPressure;
        formData.value.gen2Board = res.resultData.gen2Board
      } else {
        uni.showToast({
          title: res.errorMessage,
          icon: "none",
        });
      }
    })
    .catch((err: any) => {
      uni.showToast({
        title: "服务器异常",
        icon: "none",
      });
    }).finally(() => {
      uni.hideLoading();
    });
}
// 智能场景开发
const sceneData = ref<any>([])
const getSceneList = () => {
  advancedDeviceList(propData.equipmentId).then((res: any) => {
    console.log(res);
    if (res.resultStatus) {
      sceneData.value = res.resultData
    } else {
      uni.showToast({
        title: res.errorMessage,
        icon: "none",
      });
    }
  }).catch((err: any) => {
    uni.showToast({
      title: "服务器异常",
      icon: "none",
    })
  })
}

const toaddEditPage = (id: any, i: any) => {
  uni.navigateTo({
    url: `/pages/setDevice/addScene?sceneId=${id}&&equipmentId=${propData.equipmentId}&&temperatureStatus=${formData.value.temperatureStatus}&&sceneType=${i?.sceneType}&&sceneCondition=${i?.sceneCondition}&&sceneValue=${i?.sceneValue}&&disablePlan=${i?.disablePlan}&&sceneStatus=${i?.sceneStatus}`,
  })
}
const delModal = ref({
  visiable: false,
  scendId: ''
})
const delPlan = (id: any) => {
  delModal.value.scendId = id
  delModal.value.visiable = true
}
const confirmModal = () => {
  sceneDeviceDel(delModal.value.scendId).then((res: any) => {
    if (res.resultStatus) {
      uni.showToast({
        title: "删除成功",
        icon: "none",
      })
      delModal.value.visiable = false
      getSceneList()
    }
  })
}

const globalFont = ref()
const instance = getCurrentInstance();
const appStorage = instance?.appContext.config.globalProperties.appStorage;
onMounted(() => {
  const userInfo = appStorage.getObj("userInfo_key");
  globalFont.value = userInfo.smallFont
  getDetail()
  getSceneList()
});
// 校验
</script>
<style lang="scss" scoped>
:root {
  /* 默认字号 */
  --font-size-small: 26rpx;
  // 默认radio自豪
  --font-size-radio-small: 20rpx;
  /* 中号字号 */
  --font-size-medium: 32rpx;
  --font-size-large: 40rpx;
  /* 大号字号 */
}

.small_font {
  font-size: var(--font-size-small);
}

.small-medium {
  font-size: var(--font-size-medium);
}

.small-large {
  font-size: var(--font-size-large);
}

.content-page {
  height: calc(100vh - 200rpx);
  overflow: auto;
  background: #f5f6f7;
  padding: 32rpx;

  .first_box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;

    .left {
      padding: 48rpx 34rpx;
      background-color: #fff;
      width: 100%;
      border-radius: 16rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        // font-size: 26rpx;
        color: #333;
        // margin-right: 40rpx;
        // margin-bottom: 46rpx;
      }
    }

    .edit_btn {
      // margin-left: 320rpx;
      // font-size: 30rpx;
      color: gray;
    }

  }

  .empty {
    display: flex;
    align-items: center;
    flex-direction: column;

    image {
      width: 160rpx;
      height: 160rpx;
      margin-top: 80rpx;
    }

    .add_btn {
      width: 300rpx;
      height: 88rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
      margin-top: 50rpx;
      border-radius: 8px;
      font-weight: bold;

      image {
        width: 24rpx;
        height: 24rpx;
        vertical-align: middle;
        margin-top: 0;
        margin-right: 20rpx;
      }
    }
  }

  .scene_circle {
    background-color: #ffffff;
    padding: 40rpx 24rpx;
    padding-bottom: 20rpx;
    // padding-left: 0;
    margin-bottom: 20rpx;

    .action_box {
      height: 70rpx;
      border-top: 2rpx solid #eeeeee;
      margin-top: 40rpx;

      .action_empty {
        width: 260rpx;
        height: 100%;
      }

      .action_btn {
        padding-right: 54rpx;

        image {
          width: 24rpx;
          height: 24rpx;
          margin-right: 20rpx;
        }

        .title {
          // font-size: 24rpx;
          text-align: left;
          color: #666666;
          line-height: 40rpx;
        }
      }
    }

    .scene_name {
      position: relative;
      padding-left: 25rpx;

      /* 留出空间给绿色盒子 */
      &:before {
        content: '';
        /* 必须设置 content，才能使伪元素显示 */
        position: absolute;
        top: 50%;
        /* 垂直居中 */
        left: 0;
        /* 将盒子放置在标题的前面，左边10rpx */
        transform: translateY(-50%);
        /* 垂直居中 */
        width: 8rpx;
        height: 40rpx;
        background: #00a57d;
        border-radius: 0px 0px 2px 2px;
      }
    }

    .scene_title {
      width: 622rpx;
      height: 104rpx;
      background: #F5F6F7;
      margin: 40rpx auto;
      line-height: 104rpx;
      text-align: center;
      font-weight: bold;
    }

    .content_item {
      display: flex;
      align-items: center;

      image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 15rpx;
      }
    }
  }

  .add_btn{
      width:100%;
      height: 88rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
      margin-top: 50rpx;
      border-radius: 8px;
      font-weight: bold;

      image {
        width: 24rpx;
        height: 24rpx;
        vertical-align: middle;
        margin-top: 0;
        margin-right: 20rpx;
      }
    }
}
</style>
